<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var timer = setTimeout(function () {
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                window.location.href = "sy.html";     //手机
                console.log('shouji');
            } else {
                window.location.href = "/QQmusic-master/index.html";     //电脑
                console.log('电脑');
            }
        }, 2800);

    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            width: 100%;
            height: 100%;
            text-align: center;

        }

        #div1 {
            margin-top: 10%;
            width: 30%;
            height: 50px;
            margin-left: 35%;
            text-align: center;
           
        }
        #div1 img{
            width:100%;
            height: 100%;
            
        }
        div.poa {

            position: fixed;

            bottom: 10%;
            transition: all 1s;
        }

        div.poa div {
            width: 0;
            font-size: 30px;
            height: 20px;
            line-height: 20px;
            background-color: #65ff86;
            text-align: center;
            font-weight: 700;
            color: white;
            transition: all 1s;
        }

       
    </style>
</head>

<body>

    <div id="div1">
        <img src="/H5/img/logo2.png" alt="" sizes="" srcset="">
    </div>
    <div class="poa">
        

        <div id="progress">
            0%
        </div>
       

    </div>
    <script>
        let arr = ['hhh', 'ddd', 'eee', 'sss', 'ccc',]

        // 设置一个sleep函数，规定默认延迟时间为1000ms，返回一个Promise函数
        // 内部封装一个定时器
        function sleep(delay = 1000) {
            return new Promise(resolve => {
                setInterval(resolve, delay);
                // setInterval(() => {
                //   resolve()
                // }, delay);
            })
        }
        // 1.  使用for循环进行数组遍历，每次递增div的宽度
        async function showProgress() {
            for (let i = 0; i < arr.length; i++) {
                //等待300ms后执行后面的内容
                await sleep(300)
                let progress = document.querySelector('#progress')
                progress.style.width = i / (arr.length - 1) * document.body.offsetWidth + 'px'
                progress.textContent = i / (arr.length - 1) * 100 + '%'

            }
        }
        showProgress()
    </script>
</body>

</html>